<template>
	<div :class="classes.main">
		<span :class="classes.text">hello world!-{{globalData}}</span>
		<Toggle v-model="active"/>
		<Dropdown
			:options="options"
			:ref-class="classes.refClass"
			@click-option="clickOption"
		>
			<button>下拉菜单</button>
		</Dropdown>
		<Table
			border
			:data="data"
			:columns="columns"
			:class-key="classKey"
			:style-key="styleKey"
			:class="classes.table"
		>
			<template #head-cell="{column}">
				{{column.label}}
			</template>
			<template #head-cell-custom="{column}">
				custom-{{column.label}}
			</template>
			<template #body-cell="{value}">
				{{value}}
			</template>
			<template #body-cell-custom-col="{value}">
				custom-{{value}}
			</template>
			<template #body-cell-custom-cell1="{value}">
				custom-cell-{{value}}
			</template>
		</Table>
	</div>
</template>

<script setup lang="ts">
import {
	shallowRef,
	watchEffect,
	useCssModule,
} from 'vue';
import {
	storeToRefs,
} from 'pinia';
import {
	Dropdown,
	Table,
	Toggle,
	util,
} from '#/powerful';
import useMainStore from '#/store/useMainStore';
const {
	waitTime,
	MySet,
} = util;

const classes = useCssModule();
const mainStore = useMainStore();
const {
	globalData,
} = storeToRefs(mainStore);

console.log(process.env);

const active = shallowRef(false);
watchEffect(() => {
	document.documentElement.style.setProperty(
		'--main-color',
		active.value
			? 'red'
			: 'green',
	);
});
//region 下拉菜单组装数据
const options = [
	{label:'超长选项超长选项'},
	'选项1',
	{
		label:'选项2',
		children:[
			'子选项1',
			{label:'子选项2', icon:'bi-cart-check'},
			{
				label:'子选项3',
				slot:'custom',
				children:[
					'子选项3-1',
					{label:'子选项3-2', icon:'bi-cart-check'},
					{
						label:'子选项3-3',
						slot:'custom',
						children:[
							'子选项3-3-1',
							{label:'子选项3-3-2', icon:'bi-cart-check'},
							{label:'子选项3-3-3', slot:'custom'},
						],
					},
				],
			},
			'子选项4',
			'子选项5',
		],
	},
	{label:'选项3', icon:'bi-cart-check'},
	{label:'选项4', slot:'custom'},
];
//endregion
function clickOption(option:PF.pc.Dropdown.StandardItem){
	console.log('点击选项', option);
}
//region 列表组装数据
let id = 0;
function build(sizeList:number[], pre = ''){
	if(sizeList.length){
		const size = sizeList[0];
		const list = new Array(size);
		const nextSizeList = sizeList.slice(1);
		for(let i = 0; i < size; ++i){
			list[i] = {id:++id, val:`节点${pre}-${i}`, children:build(nextSizeList, `${pre}-${i}`)};
		}
		return list;
	}
	return [];
}
const data = [
	{id:++id, val:'懒加载节点', lazy:true},
].concat(build([25, 5, 2, 2]));
//endregion
const selected = shallowRef<PF.pc.Table.Row>();
const selectedList = new MySet<PF.pc.Table.Row>();
const selectedList2 = shallowRef<PF.pc.Table.Row[]>([]);
const expanded = new MySet<PF.pc.Table.Row>();
const treeSelectedList = new MySet<PF.pc.Table.Row>();
const treeExpanded = new MySet<PF.pc.Table.Row>();
//region 列信息
const columns:PF.pc.Table.Column[] = [
	{
		label:'第一列',
		width:100,
		field:'val',
	},
	{
		label:'预定义列类型 fixed = start',
		fixed:'start',
		children:[
			{
				label:'序号',
				type:'index',
				width:70,
			},
			{
				label:'单选列',
				type:'radio',
				selected:selected,
				width:70,
			},
			{
				type:'checkbox',
				selectedList:selectedList,
				width:70,
			},
			{
				type:'checkbox',
				selectedList:selectedList2,
				width:70,
			},
			{
				label:'可扩展列',
				width:100,
				field:'val',
				type:'expand',
				expandedList:expanded,
				lazyLoad:async (data) => {
					console.log('懒加载-expand', data);
					await waitTime(2000);
				},
			},
			{
				label:'树列',
				width:'120 + 1fr',
				field:({row}) => {
					return row.val;
				},
				type:'tree',
				selectedList:treeSelectedList,
				expandedList:treeExpanded,
				lazyLoad:async (data) => {
					console.log('懒加载-tree', data);
					await waitTime(2000);
					return [
					];
				},
			},
		],
	},
	{
		label:'居中',
		width:100,
		field:'val',
		align:'center',
	},
	{
		label:'居右',
		width:100,
		field:'val',
		align:'end',
	},
	{
		label:'格式化列',
		width:150,
		field:'val',
		format:(val) => {
			return `格式化: ${val}`;
		},
	},
	{
		label:'插槽',
		width:150,
		field:'val',
		headSlot:'custom',
		colSlot:'custom-col',
		cellSlotKey:({index}) => {
			if(index <= 1){
				return 'custom-cell' + index;
			}
		},
	},
	{
		label:'可排序',
		width:100,
		field:'val',
		sort:({row:row1}, {row:row2}) => {
			return row1.order - row2.order;
		},
	},
	{
		label:'自定义样式',
		width:100,
		field:'val',
		headClass:[
			'head1',
			{
				head2:true,
			},
		],
		headStyle:[
			{
				color:'#ff0000',
			},
		],
		colClass:[
			'col1',
			{
				col2:true,
			},
		],
		colStyle:[
			{
				color:'#002ecf',
			},
		],
		cellClassKey:({index}) => {
			if(index === 0){
				return [
					'cell1',
					{
						cell2:true,
					},
				];
			}
		},
		cellStyleKey:({index}) => {
			if(index === 0){
				return [
					{
						color:'#129708',
					},
				];
			}
		},
	},
	{
		label:'fixed = end',
		width:100,
		fixed:'end',
		field:'val',
	},
	{
		label:'最后一列',
		children:[
			{
				label:'复杂列头-1',
				width:120,
				field:'val',
			},
			{
				label:'复杂列头-2',
				children:[
					{
						label:'复杂列头-2-1',
						width:120,
						field:'val',
					},
					{
						label:'复杂列头-2-2',
						width:120,
						field:'val',
					},
				],
			},
		],
	},
	{
		label:'隐藏列',
		width:100,
		field:'val',
		hide:true,
	},
];
//endregion
//region 自定义行样式
function classKey({index}:PF.pc.Table.RowScope){
	if(index < 2){
		return [
			'row1',
			{
				row2:true,
			},
		];
	}
}
function styleKey({index}:PF.pc.Table.RowScope){
	if(index < 2){
		return [
			{
				color:'#fd8608',
			},
		];
	}
}
//endregion
</script>

<style module lang="scss">
//region 样式
.main{
	$-main-color:var(--main-color, blue);
	padding:10px 20px;
	.text{
		color:$-main-color;
	}
	.table{
		margin-top:15px;
		height:500px;
	}
}
//endregion
</style>